<template>
  <div id="supply" style="width: 100%;height:350px;" />
</template>

<script>

import { getSupply } from '@/api'

export default {
  name: "DailyProfitStat",

  mounted() {
    this.init()
  },

  methods: {
    init() {
      getSupply
        .request()
        .then(({ data }) => {
          const name = []
          const total = []
          data.data.forEach(i => {
            name.push(i.name)
            total.push(i.total)
          })
          this.setOptions({ name, total })
        })
    },

    setOptions({ name, total }) {
      let MyEcharts = this.$echarts.init(document.getElementById('supply'))
      MyEcharts.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}, // 将图表保存为图片
            restore: {}, // 还原图表
            magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
              type: ['bar', 'line']
            }
          }
        },
        title: {
          text: '供应商供应情况统计',
          left: 'center',
          align: 'right',
          textStyle: {
            color: '#00eeff',  // 图例文字的颜色
          },
        },
        xAxis: {
          type: 'category',
          data: name,
          axisLabel: {
            textStyle: {
              color: '#7edae8',  //坐标的字体颜色
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7edae8',  //坐标的字体颜色
            },
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}' + "元"
        },
        series: [{
          data: total,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#4adfff'
            }
          },
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            show: true,	// 是否可见
            rotate: 60 	// 旋转角度
          }
        }]
      })
    }
  }
}
</script>
